<template>
	<view>
		<!-- <filter-panel @filter-change="filterChange"></filter-panel> -->
		<list-filter-panel ref="filterPanel" @filter-change="filterChange" @searchKeyword="searchKeyword"></list-filter-panel>
		<view class="ac-head">
			<text class="u-font-24 u-tips-color">{{timeName}}入库支出统计(左滑查看完整表格信息)</text>
		</view>
		<scroll-view scroll-x="true" class="u-border-top">
			<view class="table-list">
				<view class="tr head u-border-bottom">
					<view class="th u-w-120"><text>类型</text></view>
					<view class="th u-w-220"><text>可回收物</text></view>
					<view class="th u-w-220"><text>回收总重量(kg)</text></view>
					<view class="th u-w-220"><text>回收总数量(件)</text></view>
					<view class="th u-w-220"><text>回收总金额(元)</text></view>
					<view class="th u-w-220"><text>上门回收重量(KG)</text></view>
					<view class="th u-w-220"><text>上门回收数量(件)</text></view>
					<view class="th u-w-220"><text>上门订单金额(元)</text></view>
					<view class="th u-w-220"><text>门店回收重量(KG)</text></view>
					<view class="th u-w-220"><text>门店回收数量(件)</text></view>
					<view class="th u-w-220 u-text-center last"><text>门店订单金额(元)</text></view>
					<!-- <view class="th fixed u-text-right"><text>操作</text></view> -->
				</view>
				<view class="body">
					<view 
					v-for="(item,index) in tableData" :key="index"
					class="tr"
					:class="index == tableData.length - 1?'last':'u-border-bottom'"
					>
						<view class="td u-w-120">
							<text>{{item.large}}</text>
						</view>
						<view class="td u-w-220">
							<text>{{item.name}}</text>
						</view>
						<view class="td u-w-220">
							<text>{{item.weight}}</text>
						</view>
						<view class="td u-w-220">
							<text>{{item.quantity}}</text>
						</view>
						<view class="td u-w-220">
							<text>{{item.amount}}</text>
						</view>
						<view class="td u-w-220">
							<text>{{item.onsiteweight}}</text>
						</view>
						<view class="td u-w-220">
							<text>{{item.onsitequantity}}</text>
						</view>
						<view class="td u-w-220">
							<text>{{item.onsiteamount}}</text>
						</view>
						<view class="td u-w-220">
							<text>{{item.storeweight}}</text>
						</view>
						<view class="td u-w-220">
							<text>{{item.storequantity}}</text>
						</view>
						<view class="td u-w-220 u-text-center last">
							<text>{{item.storeamount}}</text>
						</view>
						<!-- <view class="td fixed u-text-right">
							<text class="links u-font-24">查看</text>
						</view> -->
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		mapState,
	} from 'vuex';
	
	export default {
		data() {
			return {
				tableData: [],
				originalTableData: [],
				key: '',
				// 时间类型
				timeType: 3, //筛选时间类别：0全部，1今日，2昨日，3本月，4上月，5本季度，6上季度，7本年，9自定义时间段
				startDate: '', //开始时间
				endDate: '', //结束时间
				timeName: '本月'
			}
		},
		computed: {
			...mapState({
				operatorid: state => state.operatorid,
				storeId: state => state.storeId
			})
		},
		onLoad() {
			this.getList()
		},
		mounted() {
			console.log('this.$refs.filterPanel',this.$refs.filterPanel.timeOptions)
			this.$refs.filterPanel.timeOptions.find((item)=>item.value == 0).check = false
			this.$refs.filterPanel.filterValues.timeType = 3
			this.$refs.filterPanel.timeOptions.find((item)=>item.value == 3).check = true
		},
		methods: {
			searchKeyword(key){
				this.tableData = this.originalTableData.filter((item)=>item.name.includes(key) || item.large.includes(key))
			},
			filterChange(obj){
				console.log('filterChange',obj)
				for(let key in obj){
					this.$set(this,key,obj[key])
				}
				switch (this.timeType){
					case 0:
						this.timeName='全部'
						break;
					case 1:
						this.timeName='今日'
						break;
					case 2:
						this.timeName='昨日'
						break;
					case 3:
						this.timeName='本月'
						break;
					case 4:
						this.timeName='上月'
						break;
					case 5:
						this.timeName='本季度'
						break;
					case 6:
						this.timeName='本年'
						break;
					case 7:
						this.timeName='本年'
						break;
					case 8:
						this.timeName='上年'
						break;
					default:
						this.timeName=`${this.startDate} 至 ${this.endDate}`
						break;
				}
				this.getList();
			},
			flattenData(data, level = 0, parentPath = []) {
				let result = [];
				data.forEach(item => {
					const currentPath = [...parentPath, item];
					item.product.forEach(product => {
						result.push({
							id: product.id,
							name: product.name,
							// isweighing: product.isweighing,
							weight: product.weight,
							quantity: product.quantity,
							amount: product.amount,
							onsiteweight: product.onsiteweight,
							onsitequantity: product.onsitequantity,
							onsiteamount: product.onsiteamount,
							storeweight: product.storeweight,
							storequantity: product.storequantity,
							storeamount: product.storeamount,
							large: item.name,
							bigid: item.id,
							level: level,
							isCategory: true,
						});
					})
					// 递归处理子类型
					if (item.type && item.type.length > 0) {
						// console.log(currentPath)
						const childData = this.flattenData(item.type, level + 1, currentPath);
						console.log('递归处理子类型-childData:', childData)
						childData.forEach((cell) => {
							result = result.concat([{
								id: cell.id,
								name: cell.name,
								// isweighing: cell.isweighing,
								weight: cell.weight,
								quantity: cell.quantity,
								amount: cell.amount,
								onsiteweight: cell.onsiteweight,
								onsitequantity: cell.onsitequantity,
								onsiteamount: cell.onsiteamount,
								storeweight: cell.storeweight,
								storequantity: cell.storequantity,
								storeamount: cell.storeamount,
								large: currentPath[0].name,
								bigid: currentPath[0].id,
								level: cell.level,
								isCategory: cell.isCategory,
							}]);
						})
					}
				})
				return result;
			},
			getList() {
				this.tableData = []
				this.$u.post(`/Statistics/Recycle/OnlineStorage`, {
					timeType: this.timeType,
					startDate: this.startDate,
					endDate: this.endDate,
					operatorid: this.operatorid,
					storeIds: [this.storeId],
					key: this.key
				}).then(res => {
					this.tableData = this.flattenData(res.type)
					this.originalTableData = this.flattenData(res.type)
					// this.summary.weight = res.weight
					// this.summary.quantity = res.quantity
					// this.summary.amount = res.amount
					console.log(this.tableData)
					this.loading = false
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	
	.ac-head{
		margin-left: 30rpx;
		margin-right: 30rpx;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
	}
	.table-list{
		background-color: #fff;
		padding: 0 20rpx;
		width: 2400rpx;
		.last{
			position: sticky;
			right: 0;
			background: #fff;
			box-shadow: -2px 1px 5px 0 rgb(0 0 0 / 10%);
			// flex: 1!important
		}
		.tr{
			display: flex;
			align-items: center;
			&.head{
				// position: fixed;
				// left: 0;
				// z-index: 10;
				// background: #fff;
			}
			&:active{
				opacity: 0.6;
			}
			.th{
				// flex: 1;
				color: $u-tips-color;
				font-size: 24rpx;
				line-height: 3em;
			}
			.td{
				// flex: 1;
				padding: 24rpx 0;
			}
		}
		.links{
			color: $u-color-blue;
			border-bottom: 1px solid $u-color-blue;
		}
		.divider{
			border-right: 1px solid $u-border-color;
			height: 14px;
			padding-left: 8px;
			margin-right: 8px;
		}
		.fixed{
			position: fixed;
			right: 0;
			z-index: 9;
			background-color: #fff;
			box-shadow: 0 0 10px rgba(0, 0, 0, .12);
			padding-right: 20rpx!important;
			width: 100rpx;
		}
	}
	.slot-content{
		padding: 30rpx;
	}
	.tag{
		background-color: $u-color-blue;
		color: #fff;
		border-radius: 4rpx;
	}
	.last{
		border-width: 0;
	}
</style>

